<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>班级追踪</title>
<link href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<script src="{{URL::asset('js/jquery.min.js')}}"></script>
</head>
<body>
<div id="main">
	<el-row :gutter="15" v-loading.fullscreen.lock='loading'>
	<el-col :md="6">
		<el-card class="el-card-box">
			<div slot="header" class="el-card-header">
				<h2>对比列表</h2>
				<el-button type="primary" size="small" @click="to">查看对比</el-button>
			</div>
			<div class="el-card-body">
				<el-table :data="contrastList" :show-header="false" empty-text="请添加数据" size="mini">
					<el-table-column align="center" prop="name"></el-table-column>
					<el-table-column align="center" prop="operate">
						<template slot-scope="scope">
							<el-button type="danger" @click="removeRow(scope.row)"
								size="mini" circle plain icon="el-icon-close"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
	</el-col>
	<el-col :md="18">
		<el-card class="el-card-box">
			<div slot="header" class="el-card-header">
				<h2>班级追踪</h2>
			</div>
			<div class="el-card-body">
				<div class="table-box" v-for="(table,i) in tables">
					<el-table :data="table" border :ref="i" size="small">
						<el-table-column align="center" label=" " prop="title">
							<template slot-scope="scope">
								<el-button v-if="scope.row.title == 'btn'"
									type="primary" plain size="small" @click="addContrast(scope.row)">
									加入对比
								</el-button>
								<span v-else>
									@{{scope.row.title}}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="班级" prop="name">
							<template slot-scope="scope">
								<el-button v-if="scope.row.name == 'popover'" type="text" @click="getHoverTable(scope.row,'jiaxiao')">
									@{{scope.row.popover0}}
								</el-button>
								<span v-else>
									@{{scope.row.name}}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="班主任" prop="teacher">
							<template slot-scope="scope">
								<el-button v-if="scope.row.teacher == 'popover'" type="text" @click="getHoverTable(scope.row,'zuoye')">
									@{{scope.row.popover1}}
								</el-button>
								<span v-else>
									@{{scope.row.teacher}}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="班段" prop="level">
							<template slot-scope="scope">
								<!-- <el-button v-if="scope.row.level == 'popover'" type="text" @click="getHoverTable(scope.row,'attendance')">
									@{{scope.row.popover2}}
								</el-button> -->
								<span v-if="scope.row.level == 'popover'">
									@{{scope.row.popover2}}
								</span>
								<span v-else>
									@{{scope.row.level}}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="阶段" prop="stage">
							<template slot-scope="scope">
								<el-button v-if="scope.row.stage == 'popover'" type="text" @click="getHoverTable(scope.row,'dictation')">
									@{{scope.row.popover3}}
								</el-button>
								<span v-else>
									@{{scope.row.stage}}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="开班段" prop="start">
							<template slot-scope="scope">
								<el-button v-if="scope.row.start == 'popover'" type="text" @click="getHoverTable(scope.row,'test')">
									@{{scope.row.popover4}}
								</el-button>
								<span v-else>
									@{{scope.row.start}}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="课程" prop="lesson">
							<template slot-scope="scope">
								<el-button v-if="scope.row.lesson == 'btn'"
									type="info" plain size="small" @click="toggleLessons(scope.row,i)">
									展开
								</el-button>
								<!-- <el-button v-else-if="scope.row.lesson == 'popover'" type="text" @click="getHoverTable(scope.row,'notices')">
									@{{scope.row.popover5}}
								</el-button> -->
								<span v-else-if="scope.row.lesson == 'popover'">
									@{{scope.row.popover5}}
								</span>
								<span v-else>
									@{{scope.row.lesson}}
								</span>
							</template>
						</el-table-column>

						<!-- 被展开列 -->
						<el-table-column type="expand" class-name="expand-col" fixed="right" width="1" :resizable="false">
							<template slot-scope="props">
								<li v-for="item in props.row.sheet">
									@{{item.crouse_name}} - @{{item.teacher}}
								</li>
							</template>
					    </el-table-column>
					</el-table>
				</div>
			</div>
		</el-card>
	</el-col>
	</el-row>
	<el-dialog :visible.sync="dialogTableVisible" width="300px">
		<el-table :data="hoverTable" :show-header="false" v-loading="hover_table_loading" size="mini">
			<el-table-column align="right" prop="col_0" width="60"></el-table-column>
			<el-table-column align="center" prop="col_1">
				<template slot-scope="scope">
					<span v-if="scope.row.col_1 == '-- | --'">-- | --</span>
					<div v-else>
						@{{scope.row.col_1.percent}}%
						<i v-if="scope.row.col_1.p == '-1'"
							class="fa fa-long-arrow-down" style="color:#F56C6C;">
						</i>
						<i v-if="scope.row.col_1.p == '+1'"
							class="fa fa-long-arrow-up" style="color:#67C23A;">
						</i>
						@{{scope.row.col_1._percent}}%
						|
						@{{scope.row.col_1.avg}}
						<i v-if="scope.row.col_1.a == '-1'"
							class="fa fa-long-arrow-down" style="color:#F56C6C;">
						</i>
						<i v-if="scope.row.col_1.a == '+1'"
							class="fa fa-long-arrow-up" style="color:#67C23A;">
						</i>
						@{{scope.row.col_1._avg}}
					</div>
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</div>
</body>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		ids:"{{$ids}}",
		tables:[],
		loading:true,
		contrastList:[],
		hoverTable:[],
		hover_table_loading:true,
		dialogTableVisible:false,
	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.loading = true;
			var param = {ids:this.ids}
			$.get('/admin/report_dashboard/track/mktable',param, function(res) {
				if(res.code == 1){
					main.tables = res.data;
					main.loading = false;
					for(i in res.data){
						main.contrastList.push({
							id:res.data[i][0].id,
							name:res.data[i][0].full_name
						})
					}
				}else{
					main.$notify.info({title:"Notice",message:res.msg});
				}
			});
		},
		toggleLessons(row,i) {
			let $table = this.$refs[i];
			$table[0].toggleRowExpansion(row);
		},
		addContrast(row) {
			var bool = false;
			for(i in this.contrastList){
				if(row.id == this.contrastList[i].id){
					bool = true;
				}
			}
			if(bool){
				this.$notify.info({title:"Notice",message:"该班级已在对比列表内"})
			}else{
				this.contrastList.push({
					id:row.id,name:row.full_name
				})
			}
		},
		removeRow(row){
			for(i in this.contrastList){
				if(this.contrastList[i].id == row.id){
					this.contrastList.splice(i,1)
					return false;
				}
			}
		},
		getHoverTable(row,col) {
			this.dialogTableVisible = true;
			this.hoverTable = [];
			this.hover_table_loading = true;
			var param = {col:col,row:row}
			$.get('/admin/report_dashboard/track/mk_hover_table',param,function(res) {
				if(res.code == 1){
					main.hoverTable = res.data;
					main.hover_table_loading = false;
				}
			});
		},
		to() {
			if(this.contrastList.length == 0){
				this.$notify.error({title:"Error",message:"请添加数据"});
				return false;
			}
			var ids = [];
			for(i in this.contrastList){
				ids.push(this.contrastList[i].id);
			}
			ids = ids.sort();
			ids = ids.join(",");
			window.location.href="/admin/report_dashboard/contrast/ids/"+ids;
		}
	}
})
</script>
</html>
